Notifications

Page level toasts are universally visible and are fixed to the top of the page even as the user scrolls. This ensures that the message is always delivered to the user.

Alertdev ready

Preview

Code

<div class="slds-notify_container">
  <div class="slds-notify slds-notify--alert slds-theme--alert-texture" role="alert">
    <button class="slds-button slds-button--icon-inverse slds-notify__close">
      <svg aria-hidden="true" class="slds-button__icon">
        <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#close"></use>
      </svg>
      <span class="slds-assistive-text">Close</span>
    </button>
    <span class="slds-assistive-text">Info</span>
    <h2>Base System Alert</h2>
  </div>
</div>

Toastdev ready

Preview

Code

<div class="slds-notify_container">
  <div class="slds-notify slds-notify--toast" role="alert">
    <span class="slds-assistive-text">Info</span>
    <button class="slds-button slds-button--icon-inverse slds-notify__close">
      <svg aria-hidden="true" class="slds-button__icon slds-button__icon--large">
        <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#close"></use>
      </svg>
      <span class="slds-assistive-text">Close</span>
    </button>
    <div class="notify__content">
      <h2 class="slds-text-heading--small">Base Toast</h2>
    </div>
  </div>
</div>

When notifications are used in modals, they should be placed in the .slds-modal__header so that they can easily be seen in modals with scrolling content. This modal contains a notifications > toast.

Promptdev ready

Preview

Code

<div>
  <div aria-hidden="false" role="dialog" class="slds-modal slds-modal--prompt slds-fade-in-open">
    <div class="slds-modal__container slds-modal--prompt">
      <div class="slds-modal__header slds-theme--error slds-theme--alert-texture">
        <button class="slds-button slds-button--icon-inverse slds-modal__close">
          <svg aria-hidden="true" class="slds-button__icon slds-button__icon--large">
            <use xlink:href="/assets/icons/action-sprite/svg/symbols.svg#close"></use>
          </svg>
          <span class="slds-assistive-text">Close</span>
        </button>
        <h2 class="slds-text-heading--medium">Service Unavailable</h2>
      </div>
      <div class="slds-modal__content slds-p-around--medium">
        <div>
          <p>Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi.</p>
        </div>
      </div>
      <div class="slds-modal__footer slds-theme--default">
        <button class="slds-button slds-button--neutral">Okay</button>
      </div>
    </div>
  </div>
  <div class="slds-backdrop slds-backdrop--open"></div>
</div>

A prompt uses the base modal component and then adds the class .slds-modal--prompt to the overall .slds-modal. The utilities > themes > colors class is placed on the .slds-modal__head to create the color of the header. In the example, we illustrate using .slds-theme--error. The class .slds-theme--alert-texture should be applied to create the striped gradient. The .slds-modal__footer receives the class .slds-theme--default.

Prompt For Touchdev ready

Preview

Code

<div>
  <div aria-hidden="false" role="dialog" class="slds-modal slds-fade-in-open">
    <div class="slds-modal__container">
      <div class="slds-modal__menu">
        <button class="slds-button slds-button--neutral">Upload from Device</button>
        <button class="slds-button slds-button--neutral">Select a Salesforce File</button>
        <button class="slds-button slds-button--neutral">Cancel</button>
      </div>
    </div>
  </div>
  <div class="slds-backdrop slds-backdrop--open"></div>
</div>

A prompt for touch is a notification modal that appears in the small form factor.

Modal Toastdev readyNot Compatible with S1 Mobile

Preview

Code

<div>
  <div aria-hidden="false" role="dialog" class="slds-modal slds-modal--large slds-fade-in-open">
    <div class="slds-modal__container">
      <div class="slds-modal__header">
        <button class="slds-button slds-button--icon-inverse slds-modal__close">
          <svg aria-hidden="true" class="slds-button__icon slds-button__icon--large">
            <use xlink:href="/assets/icons/action-sprite/svg/symbols.svg#close"></use>
          </svg>
          <span class="slds-assistive-text">Close</span>
        </button>
        <div class="slds-notify_container">
          <div class="slds-notify slds-notify--toast slds-theme--error" role="alert">
            <span class="slds-assistive-text">Error</span>
            <button class="slds-button slds-button--icon-inverse slds-notify__close">
              <svg aria-hidden="true" class="slds-button__icon slds-button__icon--large">
                <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#close"></use>
              </svg>
              <span class="slds-assistive-text">Close</span>
            </button>
            <div class="notify__content slds-grid">
              <svg aria-hidden="true" class="slds-icon slds-icon--small slds-m-right--small slds-col slds-no-flex">
                <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#warning"></use>
              </svg>
              <div class="slds-col slds-align-middle">
                <h2 class="slds-text-heading--small">You&#x27;ve encountered some errors when trying to save edits to Samuel Smith.</h2>
              </div>
            </div>
          </div>
        </div>
        <h2 class="slds-text-heading--medium">Modal Header</h2>
      </div>
      <div class="slds-modal__content slds-p-around--medium">
        <div>
          <p>Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. Mollit officia cillum Lorem ullamco minim nostrud elit officia tempor esse quis. Cillum sunt ad dolore
            quis aute consequat ipsum magna exercitation reprehenderit magna. Tempor cupidatat consequat elit dolor adipisicing.</p>
          <p>Dolor eiusmod sunt ex incididunt cillum quis nostrud velit duis sit officia. Lorem aliqua enim laboris do dolor eiusmod officia. Mollit incididunt nisi consectetur esse laborum eiusmod pariatur proident. Eiusmod et adipisicing culpa deserunt
            nostrud ad veniam nulla aute est. Labore esse esse cupidatat amet velit id elit consequat minim ullamco mollit enim excepteur ea.</p>
        </div>
      </div>
      <div class="slds-modal__footer">
        <button class="slds-button slds-button--neutral">Cancel</button>
        <button class="slds-button slds-button--neutral slds-button--brand">Save</button>
      </div>
    </div>
  </div>
  <div class="slds-backdrop slds-backdrop--open"></div>
</div>

When notifications are used in modals, they should be placed in the .slds-modal__header so that they can easily be seen in modals with scrolling content. This modal contains a notifications > toast with the error theme.

Component Overview

Toasts accept two parameters: duration and dismissible. Duration controls how long the toast is visible, with a minimum time of 5 seconds. Dismissible controls whether the X is visible on the toast to let the user close the toast.

Toasts should provide a link to the relevant record in the case of creates. Or a primary action- like undo. In the case of toast for items added to a feed or related list, the link should scroll the user down the page until the item is visible.

All toasts other than success toasts should also provide an icon to distinguish the kind of message that it is. For example error toasts include the error icon.

Accessibility

Notifications should contain role="alert" on the container to signal to assistive technology that they require the user’s immediate attention. Use a span with .slds-assistive-text to let the user know what type of notification it is.

Usage

This table gives you a quick overview of the SLDS CSS classes that can be applied to this component. The theme modifiers are found in themes.
Class NameUsage
.slds-notify
Applied to:

<div>

Outcome:

Initializes notification

Required:

Required

Comments:

Applys to alerts and toasts

.slds-notify_container
Applied to:

<div>

Outcome:

Initializes notification container

Required:

Required

Comments:

Wraps around notification for positioning

.slds-notify--toast
Applied to:

.slds-notify

Outcome:

Initializes toast notification

Required:

Required

Comments:

Required for toast notifications

.slds-notify--alert
Applied to:

Outcome:

Initializes alert notification

Required:

Required

Comments:

Required for alert notifications

.slds-notify__close
Applied to:

<button>

Outcome:

Positions close icon

Required:

Required

Comments:

--

.slds-modal--prompt
Applied to:

.slds-modal

Outcome:

Initializes Prompt style notification

Required:

Required

Comments:

Themes can be added to the .slds-modal__header to create the alert style required

.slds-notify-container
Deprecated
Applied to:

Outcome:

Initializes notification container

Required:

No, optional element or modifier

Comments:

--